<template>
    <aside>
        <ul>
            <li :index="item.index" v-for="item in this.$store.state.asideData" :key="item.index" ref="menuItem" @click="handleSelect(item.value)">
                <i class="fas fa-home"></i>
                <span>{{ item.value }}</span>
            </li>
        </ul>
    </aside>
</template>

<script>
import store from '../store'

export default {
    setup(props, context) {
        return {
            handleSelect(value) {
                store.commit('setMainData', value)
            },
        }
    },
}
</script>

<style lang="scss">
aside {
    background-color: rgb(238, 238, 238);
    flex: 1;
    li {
        display: flex;
        align-items: center;
        height: 56px;
        line-height: 56px;
        font-size: 14px;
        color: #303133;
        padding: 0 1.4rem;
        list-style: none;
        cursor: pointer;
        transition: border-color 0.3s, background-color 0.3s, color 0.3s;
        white-space: nowrap;
        &:hover {
            background-color: rgb(224, 224, 224);
        }
    }
}

@media screen and (max-width: 768px) {
    aside {
        display: none;
        &.active {
            display: block;
        }
    }
}
</style>
